$(function () {
  // 切换注册和登录盒子互斥渲染
  $("#goto-register").on("click", () => {
    // 显示注册的盒子
    $("#register").stop().show();
  });

  $("#goto-login").on("click", () => {
    // 隐藏注册的盒子
    $("#register").stop().hide();
  });

  // 定义自己的表单校验规则 在html页面引入layuijs之后会在window上挂载layui,在layui中有form
  // console.log(window.layui.form)
  // const form = window.layui.form
  const { form, layer } = layui;
  form.verify({
    username: [
      /^[a-z0-9]{6,10}$/, // 正则校验规则
      "账号名是6到10位由数字, 小写字母组成",
    ],
    //我们既支持上述函数式的方式，也支持下述数组的形式
    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
    password: [/^[\S]{6,10}$/, "密码必须6到12位，且不能出现空格"],
    // 重复密码校验规则
    repwd: function (value) {
      // value：表单的值、item：表单的DOM对象
      // if(value !== $('.pwd').val()) {
      // 	return '两次输入的密码不一致'
      // }
      return value !== $(".pwd").val() && "两次输入的密码不一致";
    },
  });
  // 注册账号 为注册的表单绑定submit事件, 表单默认行为 刷新页面
  $("#register .layui-form").on("submit", async (e) => {
    e.preventDefault(); // 阻止表单默认行为
    // 处理数据username=xxx&password=xxx ['username=xx,'password==']
    // 1. 获取用户名和密码
    // console.log($('#register input[name=username]').val(),	$('#register input[name=password]').val());
    const obj = {
      username: $("#register input[name=username]").val(),
      password: $("#register input[name=password]").val(),
    };
    // console.log(obj);
    const arr = [];
    for (let k in obj) {
      // console.log(k);
      // console.log(obj[k]);
      arr.push(`${k}=${obj[k]}`);
    }
    // console.log(arr.join('&'))
    const str = arr.join("&"); // 发送请求符合格式的数据
    // 2. 发送请求 axios 发送请求
    /* axios({
			method: 'post',
			url: 'http://api-breakingnews-web.itheima.net/api/reguser',
			// post请求携带参数使用data get请求携带参数params
			data: str
		}).then(res => {
			console.log(res)
		}) */
    // Promise  可以使用async和await
    const res = await axios({
      method: "post",
      url: "http://api-breakingnews-web.itheima.net/api/reguser",
      // post请求携带参数使用data get请求携带参数params
      data: str,
    });
    // console.log(res.data) //  响应结果中axios会默认包裹一层, 真正服务器响应的结果 .data
    // status = 0 表示成功  message
    const {
      data: { status, message },
    } = res;
    // console.log(status);
    // console.log(message);
    if (status === 0) {
      // alert(message)
      layer.msg(message);
      // 注册成功后隐藏注册form
      $("#register").stop().hide();
      // 刷新页面
      // window.location.href="./login.html" // 跳转到指定页面
      // window.location.reload() // 刷新页面
    }
  });

  // 登录账号 为注册的表单绑定submit事件, 表单默认行为 刷新页面
  $("#login .layui-form").on("submit", (e) => {
    e.preventDefault(); // 阻止表单默认行为
    const obj = {
      username: $("#login input[name=username]").val(),
      password: $("#login input[name=password]").val(),
    };
    const arr = [];
    for (let k in obj) {
      arr.push(`${k}=${obj[k]}`);
    }
    const str = arr.join("&"); // 发送请求符合格式的数据
    axios({
      method: "post",
      url: "http://api-breakingnews-web.itheima.net/api/login",
      // post请求携带参数使用data get请求携带参数params
      data: str,
    }).then((res) => {
      // console.log(res)
      const {
        data: { status, message },
      } = res;
      if (status === 0) {
        layer.msg(message);
        // 跳转到index页面
        location.href = "./index.html";
      }
    });
  });
});
